<template>
  <el-card >
    <div class="main">
      <el-card title="最近一周访问量" style="margin-bottom: 10px" shadow="hover">
        <LineChart :data="visitList" />
      </el-card>
      <el-row :gutter="10">
        <el-col :sm="24" :md="24" :lg="12">
          <el-card title="热门岗位排名" style="flex:1;" shadow="hover">
            <BarChart :data="popularThings" />
          </el-card>
        </el-col>
        <el-col :sm="24" :md="24" :lg="12">
          <el-card title="热门分类比例" style="flex:1;" shadow="hover">
            <DonutChart :data="popularClassification" />
          </el-card>
        </el-col>
      </el-row>

    </div>
  </el-card>
</template>

<script setup>


import LineChart from "@/components/LineChart.vue";
import BarChart from "@/components/BarChart.vue";
import DonutChart from "@/components/DonutChart.vue";
import {onMounted, ref} from "vue";
import {listApi} from "@/api/sysInfo";
import {ElMessage} from "element-plus";

const popularThings = ref([]);
const popularClassification = ref([]);
const visitList = ref([]);

//用父组件给子组件发送数据
const fetchData = async () => {
  try {
    const response = await listApi();
    const data = response.data;
    popularThings.value = data.popularThings;
    popularClassification.value = data.popularClassification;
    visitList.value = data.visitList;
  } catch (error) {
    console.error('数据请求错误', error);
    ElMessage.error('数据请求错误')
  }
};

onMounted(fetchData);
</script>

<style scoped>


</style>